<template>
  <view class="mine-container">
    <view class="bg"></view>
    <view
      class="mine-content p-[30rpx] box-border absolute top-0 left-0 w-[100%] flex flex-col"
    >
      <view
        class="head module-part w-[100%] h-[214rpx] px-[32rpx] py-[38rpx] box-border flex flex-row justify-start"
      >
        <view>
          <image
            src="@/static/images/def-avatar.png"
            mode="aspectFit"
            class="w-[140rpx] h-[140rpx]"
          />
        </view>
        <view class="flex flex-col justify-around ml-[40rpx]">
          <text class="text-[#222222] text-[38rpx]">何*</text>
          <text class="text-[#666666] text-[28rpx]">500229********2326</text>
        </view>
      </view>
      <view class="menu-list module-part mt-[30rpx] grow">
        <uni-list class="mt-2" :border="false">
          <template v-for="(item, index) in menuList" :key="item.id">
            <uni-list-item
              :thumb="item.icon"
              thumb-size="sm"
              :title="item.name"
              link="navigateTo"
              :to="item.url"
              :border="false"
            ></uni-list-item>
          </template>
        </uni-list>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import gklsIcon from "@/static/images/icon-gkls.png";
import wdfkIcon from "@/static/images/icon-wdfk.png";
import wdpjIcon from "@/static/images/icon-wdpj.png";
import wdscIcon from "@/static/images/icon-wdsc.png";
import wdspIcon from "@/static/images/icon-wdsq.png";

const menuList = reactive([
  {
    id: 1,
    name: "我的申请",
    icon: wdspIcon,
    url: "/subPages/mine/myApply/index",
  },
  {
    id: 2,
    name: "我的收藏",
    icon: wdscIcon,
    url: "/subPages/mine/myCollection/index",
  },
  {
    id: 3,
    name: "我的反馈",
    icon: wdfkIcon,
    url: "/subPages/mine/myFeedback/index",
  },
  {
    id: 4,
    name: "我的评价",
    icon: wdpjIcon,
    url: "/subPages/mine/myEvaluation/index",
  },
  {
    id: 5,
    name: "观看历史",
    icon: gklsIcon,
    url: "/subPages/mine/viewHistory/index",
  },
]);
</script>

<style scoped lang="scss">
.mine-container {
  .bg {
    width: 100%;
    height: 45vh;
    background: url("@/static/images/mine_bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .mine-content {
    height: calc(100vh - 198rpx - 90rpx);
  }
  :deep(.uni-list--sm) {
    width: 46rpx;
    height: 46rpx;
  }
  :deep(.uni-list-item__content-title) {
    color: #333;
  }
  :deep(.uni-list-item__icon) {
    margin-right: 5rpx;
  }
  :deep(.uni-list-item__container) {
    padding: 30rpx 30rpx;
  }
}
</style>
